<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 序列化与反序列化
        // <1> 将对象或数组转换为json格式字符串
        // const obj = {
        //     id: 10001,
        //     name: "careathers",
        //     age: 22,
        //     message: "ChangSha Socail Work College"
        // }
        // const jsonStr = JSON.stringify(obj)
        // console.log(jsonStr)

        // 将数组转换为json字符串
        // const arr = [11, 22, 33, 44]
        // const arrayJsonStr = JSON.stringify(arr)
        // console.log(arrayJsonStr)

        // <2> 将json字符串进行反序列化
        // const parseObj = JSON.parse(jsonStr)
        // console.log(parseObj)
        
        // Web存储
        
        // <1> 将数据存储至localStorage中
        // localStorage.setItem("name", "careathers")

        // <2> 从localStorage中获取数据
        // const name = localStorage.getItem("name")
        
        // console.log(name)

        // <3> 从Web数据库中删除指定键值对
        // localStorage.removeItem("name")

        // const name = localStorage.getItem("name")
        // console.log(name)

        // 存储对象

        // <1> 存储对象
        // const obj = {
        //     id: 10001,
        //     name: "careathers", 
        //     age: 18,
        //     school: "ChangSha Social Work College"
        // }
        // 1 将对象序列化
        // const jsonFormatObject = JSON.stringify(obj)
        
        // 2 将json格式的对象字符串写入至localStorage中即可
        // localStorage.setItem("obj", jsonFormatObject)

        // <2> 获取对象
        // 1 取出对象`
        // const jsonFormatObject = localStorage.getItem("obj")

        // // 2 json字符串反序列化
        // const obj = JSON.parse(jsonFormatObject)

        // console.log(obj)

        // 十一、promise
        // 任务1，延迟2s输出1，延迟1s输出2，延迟1s输出3
        // 出现的情况：所有函数都是同时执行的，导致无法达到预想输出

        // <1> 使用回调嵌套的方式进行实现
        // -- 缺点：可读性差
        // setTimeout(() => {
        //     console.log(1)
        //     setTimeout(() => {
        //         console.log(2)
        //         setTimeout(() => {
        //             console.log(3)
        //         },1000)
        //     },1000)
        // },2000)
        
        // promise的基本使用


        // 1 实例化promise对象
        // const p = new Promise((resolve, reject) => {
        //     // 里面用于封装回调函数，并根据回调函数的调用状态来执行相应的方法
        //     setTimeout(() => {
        //         // 表示回调函数执行成功，并返回参数
        //         resolve("OK")
        //     }, 2000)

        //     // 若是回调函数执行失败，则执行reject（）方法，并返回对应的参数
        //     // 不过由于此处必定成功，则省略
        // })

        // 2 调用promise对象的 then（）方法，其会根据执行的方法调用对应的方法
        // p.then((msg) => {
        //     // 成功执行这个
        //     console.log(`异步成功！返回${msg}`)
        // }, (msg) => {
        //    // 失败执行这个
        //    console.log(`异步成功！返回${msg}`)
        // })

        // <2> 使用promise的链式调用消除回调地狱
        // 1 封装异步函数
        // function delay(duration, n) {
        //     return new Promise((resolve, reject) => {
        //         // 在promise中封装异步代码
        //         setTimeout(() => {
        //             resolve(n)
        //         }, duration)
        //     })
        // }

        // 2 链式调用
        // delay(2000, 1)
        //     .then((n1) => {
        //         console.log(n1)
        //         return delay(1000, 2)
        //     }).then((n2) => {
        //         console.log(n2)
        //         return delay(1000, 3)
        //     }).then((n3) => {
        //         console.log(n3)
        //     })
        
        // <3> 使用Async + Await 结合 Promise对象

        

        


    </script>    
</body>
</html>